@import "mixin.scss";

$baskerville :'Libre Baskerville', serif;
$gold :#bb9751;
$rootUrl: "/bete/";

html{
	height:100%;
	background:url($rootUrl+'images/test.jpg') center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	 background-size: cover;
}

body{
	height:100%;
	font-family:$baskerville;
}

a{
	color:inherit;
	text-decoration:none;
}


#wrapper{
	display:none;
	min-height:100%;
	height:auto !important;
	margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}

#content{
	margin:10px auto 0 auto;
	padding-bottom:30px; /*footer height*/
}
.container{
	width:1170px;
	margin:0 auto;
}

.last{
	margin-right:0 !important;
}

.clear{
	clear:both;

}

/*header*/
header{
	width:100%;
	height:121px;
	padding:10px 0;
	background:url($rootUrl+'images/footer-bg.png') repeat;
}
nav{
	text-align:center;
	height:121px;
	position:relative;
}

#hamburger-icon{
	display:none;
}

#lang{
	position:absolute;
	top:5px;
	left:0;
	color:$gold;

	a{
		color:$gold;
		@include transition(all, 250ms, linear);
	    text-decoration: none;
	}

	a:hover{
		color:#ffffff;
	}
}

ul#nav-left li, ul#nav-right li{
	float:left;
	width:120px;
	text-align:center;
	margin-top:60px;
	font-size:14px;
	color:#ffffff;
	text-transform:uppercase;

	a{
		color:#ffffff;
		text-decoration: none;
		@include transition(all, 250ms, linear);
	    display: block;
	    width: 100%;
	}

	a:hover{
		color:$gold;
	}
}

#nav-right{
	float:right;
}

#nav-left{
	float:left;
}

#logo{
	width:200px;
	margin:0 auto;
}

.push{
	height:30px;
}
footer {
	position: relative;
	height: 30px;
	background:url($rootUrl+'images/footer-bg.png') repeat;	

	div{
		color:$gold;
		font-size: 12px;
		text-align: center;
		line-height: 25px;
		position:relative;
			#social-icon{
				top:-40px;
				width:70px;
				height: 32px;
				position: absolute;
				overflow: hidden;

				img{
					width:32px;
					@include transition(all, 250ms, linear);
				    cursor:pointer;
				}

				img:hover{
					margin-top: -33px;
				}

				#fb{
					float:left;
				}

				#linked{
					float:right;
				}
			}
	}

	#developer a{
		position:absolute;
		right:40px;
		bottom:7px;
		color:$gold;
		font-size: 12px;
		line-height: 18px;
		@include transition(all, 250ms, linear);
	}

	#developer a:hover{
		color: #ffffff;
	}
}

/* home */
#tag-line{
	position:absolute;
	bottom:100px;
	right:100px;
	color:#ffffff;
	font-size:36px;
	line-height:35px;
	span{
		font-size: 60px;
	}
} 

/* artiste */
.artist{
	width:650px;
	padding:20px;
	p{
		margin: 20px 0;
		color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
}

#profile-pic{
	float:right;
	padding:5px;
	width:250px;
}

/* contact */
.contact{
	width:960px;
	padding:20px;;
	text-align:center;
}

.contactIcon{
	color:$gold;
}

.icon-mail{
	margin:40px auto 20px auto;
	font-size:54px;
}

.contact-title{
	text-align:center;
	font-size:16px;
	color:#ffffff;
	margin:40px 0;
	text-transform:uppercase;
}

.contact-col{
	padding:10px;
	width:280px;
	height:100px;
	margin:0 30px 0 0px;
	float:left;

	i{
		color: $gold;
		font-size: 28px;
		margin: 30px 0;
		display: block;
		@include transition(all, 250ms, linear);
	}

	i:hover{
		color:#ffffff;
	}

	span{
		display: block;
		text-align:center;
		color: #ffffff;
		text-transform: uppercase;
		font-size: 16px;
	}

	a span{
		@include transition(all, 250ms, linear);
	}

	a span:hover{
		color: $gold;
	}
}

form#contact{
	width:350px;
	margin:40px auto 0 auto;

	.error{
		color: red;
		font-size: 10px;
		display: none;
		float:left;
		margin: 0 0 0 10px;
		line-height: 16px;
	}

	input, textarea{
		width: 340px;
		padding: 0 0 0 10px;
		height: 25px;
		margin: 5px 0;
		border:1px solid $gold;
		background:url($rootUrl+'images/footer-bg.png');
		color: #ffffff;
		font-family: $baskerville;
		@include rounded(5px);
	}

	textarea{
		height: 130px;
		padding:10px;
	}

	#submit{
		width:80px;
		height: 30px;
		color: #ffffff;
		padding:0;
		background:url($rootUrl+'images/footer-bg.png');
		@include transition(all, 250ms, linear);
		@include rounded(5px);
	}

	#submit:hover{
		color:$gold;
		@include rounded(0);
	}
	label{
		text-align: left;
		color: #ffffff;
		float: left;
	}
}

/*photos*/
.photos{
	width:960px;
	padding:20px;
}

.thumb{
	float:left;
	width:150px;
	height:100px;
	margin:12px 12px 12px 0;
	@include transition(all, 250ms, linear);
}

.thumb:hover{
	@include opacity(75);
}

.fancybox-skin{
	background-color:$gold !important;
}
/* point de vente*/
.buy{
	width:960px;
	padding:20px;
}
.vente-col{
	padding:40px;
	width:383px;
	margin:0 30px 0 0px;
	float:left;
	border:1px solid $gold;

	i{
		color: $gold;
		font-size: 36px;
		display: block;
		text-align: center;
	}


	span{
		display: block;
		text-align:left;
		color: #ffffff;
		line-height:20px;
		margin: 40px 0;
		font-size:14px;
		height: 120px;
	}

	span a{
		color: #ffffff;
		@include transition(all, 250ms, linear);
	}

	span a:hover{
		color: $gold;
	}
}

/* google map*/
.map{
	width:383px;
	height:300px;
}

/* press*/
.press{
	width:960px;
	padding:20px;

	p{
		margin: 20px 0;
		color: #ffffff;
		width: 600px;
		line-height: 25px;
		font-size:14px;

		span{
			color: $gold;
		}
	}

	#img-wrap{
		float:right;
	}

	#press-bottom{
		color: #ffffff;
		font-size: 18px;
		line-height: 25px;
		margin: 40px 0 40px 0;
	}

	#press-big{
		margin: 60px 0 40px 0;
		font-size: 36px;
	}
}

#btn-pdf{
	width:100px;
	height:30px;
	background:$gold;
	color:#ffffff;
	text-align:center;
	line-height:30px;
	font-size:14px;
	cursor:pointer;
	@include transition(all, 250ms, linear);
		a{
			display: block;
			width:100px;
			height:30px;
		}
	}

#btn-pdf:hover{
	color:$gold;
	background:url($rootUrl+'images/footer-bg.png');
}

